<template>
  <div class="content-right">
      <h2>
          入住歌手
          <a href="">查看全部 >></a>
      </h2>
      <ul class="ul4">
          <li v-for="(item , index) in obj" v-bind:key="index">
              <img v-bind:src="item.img" alt="">
              <div>
                  <h3>
                      {{item.name}}
                  </h3>
                  <p>
                      {{item.msg}}
                  </p>
              </div>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
    data(){
        return{
            obj:[
                {
                    img:'img/zhang.jpg',
                    name:'张惠妹',
                    msg:'台湾歌手张惠妹',
                },
                {
                    img:'img/zhang.jpg',
                    name:'张惠妹',
                    msg:'台湾歌手张惠妹',
                },
                {
                    img:'img/zhang.jpg',
                    name:'张惠妹',
                    msg:'台湾歌手张惠妹',
                },
                {
                    img:'img/zhang.jpg',
                    name:'张惠妹',
                    msg:'台湾歌手张惠妹',
                },
                {
                    img:'img/zhang.jpg',
                    name:'张惠妹',
                    msg:'台湾歌手张惠妹',
                },
            ]
        }
    }
}
</script>

<style>
    .content-right{
        flex:1;
        /* border:1px solid #888; */

    }
    .content-right h2{
        margin-top:20px;
        font-size:20px;
        margin-bottom:50px;
    }
    .content-right h2 a{
        display: inline-block;
        float:right;
        font-size:16px;
        text-decoration: none;
        color:#666;
        line-height:25px;
    }
    .ul4 li{
        background:rgb(228, 226, 226);
        height:62px;
        margin-bottom: 10px;
    }
    .ul4 li img{
        float: left;
    }
    .ul4 li div{
        float:right;
    }
</style>